import React from 'react';
import { Menu, Dropdown, Input, Button, Select} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import './ProjectHeader.css';

const { Search } = Input;
const { Option } = Select;

const categories = [
  '官方', '社交娱乐', '专业知识', '内容媒体', '效率工具', 
  '教育培训', '企业服务', '营销电商', '政务服务', '医疗健康', '智能硬件'
];
interface ProjectHeaderProps {
    subTitle: string;
}

const ProjectHeader: React.FC <ProjectHeaderProps>= () => {
  const menu = (
    <Menu>
      {categories.slice(8).map((category, index) => (
        <Menu.Item key={index}>{category}</Menu.Item>
      ))}
    </Menu>
  );

  return (
    <div className="component-market">
      <div className='top-menu'>
        <h1>大创广场 <span>nihao</span></h1>
        <div className="search-bar">
          <Select defaultValue="全部标签" style={{ width: 120 }} >
            <Option value="all">全部标签</Option>
            <Option value="专业知识">专业知识</Option>
            <Option value="效率工具">效率工具</Option>
          </Select>
          <Select defaultValue="综合排序" style={{ width: 120 }} >
            <Option value="comprehensive">综合排序</Option>
            <Option value="popular">最受欢迎</Option>
            <Option value="views">最热</Option>
          </Select>
          <Search placeholder="搜索组件关键词" style={{ width: 240 }} />
          <button className='start-chat-button'>创建应用</button>
        </div>
      </div>
      <div className="category-menu">
        {categories.slice(0, 10).map((category, index) => (
          <Button key={index} type={category === '官方' ? 'primary' : 'default'} style={{ borderColor: 'white', borderRadius: '0px'}}>{category}</Button>
        ))}
        <Dropdown overlay={menu}>
          <Button style={{ borderColor: 'white', borderRadius: '0px'}}>
            更多 <DownOutlined />
          </Button>
        </Dropdown>
      </div>
    </div>
  );
};

export default ProjectHeader;
